<template>
  <div class="box">
    <div class="tab">
      <span>限时折扣</span>
      <!-- 倒计时 -->
      <van-count-down :time="time" class="daojishi">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <p class="p1">更多</p>
    </div>
    <Goods></Goods>
    
    <div class="tab">
      <span>本周爆款</span>
      <p class="p1">更多</p>
    </div>
    <Goods2></Goods2>
    <div class="tab">
      <span>为您推荐</span>
    </div>
    <GoodsList></GoodsList>
  </div>
</template>

<script>
import Vue from "vue";
import { CountDown } from "vant";
Vue.use(CountDown);
import Goods from './Goods'
import Goods2 from './Goods2'
import GoodsList from './Goods-list'
export default {
  components:{
    Goods,
    Goods2,
    GoodsList,
  },
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
    };
  },
};
</script>

<style lang="stylus" scoped>
.box
  background-color #c1ab96
.tab 
  display: flex;
  padding: 20px 0px;

  >span 
    color: #fff;
    font-weight: bold;
    margin-left: 15px;
  >.daojishi 
    margin-left: 15px;
  >.p1
    flex 1
    text-align right 
    margin-right 10px
    color #fff


// 倒计时样式
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #000;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #000;
}
</style>